﻿<!DOCTYPE html>
<html> 
<head> 
	<title>Home System</title>
  <meta name="HandheldFriendly" content="true">
	<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1"> 
	<link rel="stylesheet" href="jquery/jquery.mobile-1.2.1.min.css" />
	<script src="jquery/jquery-1.8.3.min.js"></script>
	<script src="jquery/jquery.mobile-1.2.1.min.js"></script>
  <script>
    $(document).ready(function(){
      // bind to slider event
      $("#dhwrec-switch").bind("change", function(){
        showRefreshNotification();
        var datatosend = "<hsd><p n=\"state\" t=\"b\">" + ($(this).val() == "on" ? "true" : "false") + "</p></hsd>";
        jQuery.post("/HSA/execute?name=dhwrec&msg=set_state", datatosend)
        .done(function(){
          refresh();
        })
        .fail(function(jqXHR){
          showFailedNotification(jqXHR.status);
        });
      });
      
      window.setInterval(refresh, 60000);
      
      refresh();
    });
    
    function refresh(){
      showRefreshNotification();
      jQuery.get("/HSA/execute?name=dhwrec&msg=get_state")
      .done(function(data){
        $p = $(data).find("p");
        if ($p.text() == "true"){
          $("#dhwrec-switch").val('on').slider('refresh');
        } else {
          $("#dhwrec-switch").val('off').slider('refresh');
        }
        hideRefreshNotification();
      })
      .fail(function(jqXHR){
        showFailedNotification(jqXHR.status);
      });
    }
    
    var popupShown = false;
    var popupBackground = $("#refresh-popup").css("background");
    
    function showRefreshNotification(){
      if (popupShown){
        hideRefreshNotification();
      }
      
      var popup = $("#refresh-popup");
      popup.css("background", popupBackground);
      popup.text("Odświeżanie...");
      popup.popup("open", { y: 50 });
      popupShown = true;
    }
    
    function hideRefreshNotification(){
      $("#refresh-popup").popup("close");
      popupShown = false;
    }
    
    function showFailedNotification(errorCode){
      if (popupShown){
        hideRefreshNotification();
      }
      
      var popup = $("#refresh-popup");
      popup.text("Blad (" + errorCode + ")!");
      popup.css("background", "red");
      popup.popup("open", { y: 50 });
      popupShown = true;
    }
  </script>
  <style>
  </style>
</head>

<body> 

<div data-role="page">
	<div data-role="header">
		<h1>Komfort</h1>
	</div>

  <div class="center-wrapper" data-role="content">
  
    <div data-role="fieldcontain">
      <label class="switch-label" for="dhwrec-switch">Cyrkulacja CWU</label>
      <select id="dhwrec-switch" name="dhwrec-switch" data-role="slider">
        <option value="off">Wył</option>
        <option value="on">Wł</option>
      </select>
    </div>
    
	</div>
  <div data-role="popup" id="refresh-popup" class="ui-content" data-history="false" data-theme="e" style="padding: 5px"></div>
</div>

</body>
</html>